<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>单分辨率病灶自动标注</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <style>
        .layui-panel {
            white-space: nowrap;
            padding: 50px 30px;
            position: fixed;
        {#使用transform会导致内部字体变模糊#} right: calc(50% - 352px);
            bottom: calc(50% - 155px)
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black" style="background-color: #23262e!important;">
                {#                <img src="{{ url_for('static',filename='img/logo.png') }}" alt="" style="width: auto;height: 95%"/>#}
            </div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layui-hide-xs"><a href="/user/home">首页</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="/patient/patient_page">查看病人</a></li>
                <li class="layui-nav-item layui-hide-xs layui-this"><a
                        href="javascript:void(0)">单分辨率病灶自动标注</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="/image/multi_mark">多分辨率病灶自动标注</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:void(0)">{{ user.name }}</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="/user/logout">登出</a></li>
            </ul>
        </div>

        <div class="layui-body">
            <div class="layui-panel">
                <form lay-filter="image_form" class="layui-form" action="javascript:void(0)">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择病人</label>
                            <div class="layui-input-inline">
                                <select lay-filter="patient_id" id="patient_id" name="patient_id" lay-verify="required"
                                        lay-search="">
                                    <option value="">直接选择或搜索选择</option>
                                    {% for patient in patient_list %}
                                        <option value="{{ patient.id }}">{{ patient.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">选择模型</label>
                            <div class="layui-input-inline">
                                <select lay-filter="model_kind" id="model_kind" name="model_kind" lay-verify="required"
                                        lay-search="">
                                    <option value="">直接选择或搜索选择</option>
                                    <option value="1">deeplabv3+</option>
                                    <option value="2">manet</option>
                                    <option value="3">mocov2</option>
                                    <option value="4">pixprosw</option>
                                    <option value="5">pspnet</option>
                                    <option value="6">simclr</option>
                                    <option value="7">unet</option>
                                    <option value="8">unet++</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="text-align: left;padding-left: 35px">
                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius"
                                    id="upload_image_btn">上传图片
                            </button>
                        </div>
                        <div class="layui-inline" style="margin-left: 44px">

                            <div class="layui-upload">
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" style="width: 92px;height: 92px" id="preview_image">
                                </div>
                            </div>
                        </div>
                        <button type="button" id="btn_start" class="layui-btn"
                                style="position: absolute;right: 50px;bottom: 50px">
                            开始标注
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    layui.use(['upload', 'element', 'layer', 'form'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , form = layui.form
            , element = layui.element
            , layer = layui.layer;
        //常规使用 - 普通图片上传
        let m_index;
        {#上传模块#}
        let uploadInst = upload.render({
            elem: '#upload_image_btn'
            , accept: 'images'
            , acceptMime: 'image/jpg, image/png'
            , url: '/image/solo_transfer' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , auto: false
            , bindAction: '#btn_start'
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#preview_image').attr('src', result); //图片链接（base64）
                });
            }
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                if (!form.validate("#patient_id,#model_kind")) {
                    return false;
                }
                m_index = layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                layer.close(m_index)
                //如果上传失败
                if (!res.success) {
                    return layer.alert(res.msg);
                }
                //上传成功的一些操作
                //……
                let image_id = res.id
                {#关闭弹窗后刷新页面，以刷新表单#}
                layer.open({
                    type: 2,
                    area: ['95%', '95%'],
                    content: [`/image/show_result?id=${image_id}`, 'no'],
                    end:function () {
                        location.reload()
                    }
                })
            }
            , error: function () {
                layer.close(m_index)
                //演示失败状态，并实现重传
                layer.confirm('上传失败，请重试', {btn: ['重试', '取消']}, function () {
                    uploadInst.upload();
                })
            }
        });
        form.on('select()', function (data) {
            let i_form = form.val('image_form')
            uploadInst.reload({
                data: {
                    'patient_id': i_form.patient_id,
                    'model_kind': i_form.model_kind
                    //默认还会有一个 file: file
                }
            });
        });
    })
</script>
</body>
</html>